<template>
    <div
        v-magnifier
        class="img-wrap"
        :style="{
            width: imgWidth + 'px',
            height: imgHeight + 'px'
        }"
    >
        <a
            class="mag-wrap"
            :href="link"
            :target="blank ? 'blank' : ''"
            :style="{
                width: magWidth + 'px',
                height: magHeight + 'px'
            }"
        >
            <img
                class="mag-img"
                :src="imgUrl"
                :alt="imgAlt"
                :style="{
                    width: imgWidth + 'px',
                    height: imgHeight + 'px'
                }"
            >
        </a>

        <a
            class="img-link"
            :href="link"
        >
            <img
                class="img-static"
                :src="imgUrl"
                :alt="imgAlt"
            >
        </a>
    </div>
</template>
<script>

import { magnifier } from '../directives'

export default {
    name: 'MgMagnifier',
    directives: {
        magnifier
    },
    props: {
        imgWidth: {
            type: Number,
            default: 500
        },
        imgHeight: {
            type: Number,
            default: 500
        },
        imgUrl: {
            type: String,
            default: ''
        },
        imgAlt: {
            type: String,
            default: ''
        },
        link: {
            type: String,
            default: 'https://www.baidu.com'
        },
        blank: {
            type: Boolean,
            default: true
        },
        magWidth: {
            type: Number,
            default: 150
        },
        magHeight: {
            type: Number,
            default: 150
        }
    }
}
</script>
<style lang="scss" scoped>
    .img-wrap {
        position: relative;
        border: 1px solid #ccc;

        .mag-wrap {
            position: absolute;
            top: 0;
            left: 0;
            box-shadow:  0 0 3px #999;
            cursor: move;
            overflow: hidden;
            background: #fff;
            display: none;
            &.show {
                display: block;
                transform: scale(1.5);
            }
            .mag-img {
                position: absolute;
                top: 0;
                left: 0;
            }
        }

        .img-static {
            width: 100%;
            height: 100%;
        }
    }
</style>